<template>
	<view class="browse-video">
		<view class="back" @click="closeBrowseVideo">
			<image class="icon" :src="imgPath + 'index/back.svg'" mode="widthFix"></image>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<mi-lin-video v-if="companyName!='极智拍'" class="videoEl" id="browseVideoEl" :src="item.url" :autoplay="true" :miLinToken="miLinToken" bindvideoVertifySuccess="videoVertifySuccess" bindvideoVertifyFailed="videoVertifyFailed"></mi-lin-video>
		<video v-else class="videoEl" id="browseVideoEl" ref="browseVideoEl" object-fit="contain" :src="item.url" :autoplay="true"></video>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<video class="videoEl" id="browseVideoEl" ref="browseVideoEl" object-fit="contain" :src="item.url" :autoplay="true"></video>
		<!-- #endif -->
		<view class="right-btns" v-if="item.myType == 'UserVideo'">
			<view class="btn download" @tap="saveVideo()">
				<image class="icon" :src="imgPath + 'browseVideo/download-fill.svg'" mode="widthFix"></image>
				<view class="text">下载</view>
			</view>
			<view class="btn del" @tap="delVideo">
				<image class="icon" :src="imgPath + 'browseVideo/del.svg'" mode="widthFix"></image>
				<view class="text">删除</view>
			</view>
		</view>
		<view class="inCreateVideoBtn">
			<view class="btn" v-if="item.myType == 'Template'" @click="pickTemplate(item, index)">使用模板</view>
		</view>
		<LoginDialog ref="LoginDialog" :show="LoginDialogShow" @successFn="loginDialogShowSucc" @changeShow="changeLoginDialogShow" style="z-index: 999"></LoginDialog>
	</view>
</template>

<script>
import { tools } from "../../utils/util";
import * as api from "@/api/home.js";
export default {
	name: "BrowseVideo",
	data() {
		return {
			imgPath: tools.imgPath,
			companyName: tools.companyName,
			item: {},
			index: -1,
			browseVideoShow: true,
			miLinToken: "",
			LoginDialogShow: false
		};
	},
	methods: {
		onProgress(e) {
			console.log("onProgress", e);
		},
		doit(e) {
			console.log("doit", e);
		},
		videoVertifyFailed(e) {
			console.log("videoVertifyFailed", e);
		},
		videoVertifySuccess(e) {
			console.log("videoVertifySuccess", e);
		},
		// 删除视频
		delVideo() {
			let item = this.item;
			let that = this;
			uni.showModal({
				title: "提示",
				content: "此操作将删除视频, 是否继续?",
				success: function (res) {
					if (res.confirm) {
						api.getDelVideo(item.videoSn).then((res) => {
							if (!res) return;
							that.toPage("/pages/index/index", "reLaunch");
						});
					}
				}
			});
		},
		// 保存视频
		saveVideo() {
			console.log(1111111, this.item.url);
			// #ifndef H5
			uni.showLoading({
				title: "下载中"
			});
			uni.downloadFile({
				url: this.item.url,
				success: (downloadResult) => {
					console.log(2222222, downloadResult);
					if (downloadResult.statusCode === 200) {
						uni.hideLoading();
						console.log(33333333, downloadResult);
						// 下载成功，保存视频到系统相册
						uni.saveVideoToPhotosAlbum({
							filePath: downloadResult.tempFilePath,
							success: () => {
								uni.showToast({
									title: "视频保存成功"
								});
							},
							fail: (err) => {
								console.log("视频保存失败1", err);
								uni.showToast({
									title: "视频保存失败1",
									icon: "none"
								});
							}
						});
					} else {
						uni.showToast({
							title: "视频下载失败2",
							icon: "none"
						});
					}
				},
				fail: (err) => {
					console.log("视频保存失败3", err);
					uni.showToast({
						title: "视频下载失败3",
						icon: "none"
					});
				}
			});
			// #endif
			// #ifdef H5
			let ua = uni.getStorageSync("ua");
			if (ua.indexOf("micromessenger") != -1) {
				tools.easyToast("点击右上角使用浏览器打开来下载文件");
			} else {
				let a = document.createElement("a");
				// 设置下载地址
				a.setAttribute("href", this.item.url);
				// 设置文件名
				a.setAttribute("download", this.item.videoName);
				console.log(a);
				a.click();
			}
			// #endif
		},
		//跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},
		// 监听登录弹出层显示
		changeLoginDialogShow(val) {
			this.LoginDialogShow = val;
		},
		// 登陆成功数据刷新
		loginDialogShowSucc() {},
		// 初始化数据
		async init(payload) {
			if (payload?.id) {
				let res = await api.getVideoSysmatById({
					id: payload.id
				});
				if (!res) {
					tools.easyToast("此模板已失效！");

					return;
				}
				let item = res.data;
				this.item = { ...item, url: item.previewVideo, myType: "Template" };
			} else {
				let browseVideo = uni.getStorageSync("browseVideo");
				if (browseVideo) {
					this.item = browseVideo.item;
					this.index = browseVideo.index;
					// uni.removeStorageSync("browseVideo");
				}
			}
		},
		//判断登录
		async isLogin() {
			let res = await api.getSelectauditlist();
			return !!res;
		},
		//选择模板
		async pickTemplate(item, index) {
			let loginFlag = await this.isLogin();
			if (!loginFlag) return;
			uni.setStorageSync("template", {
				matterUrl: item.matterUrl,
				updateType: "VideoTemplate"
			});
			this.toPage("/pages/createVideo/createVideo");
		},
		// 关闭浏览视频
		closeBrowseVideo() {
			let pages = getCurrentPages();
			console.log(pages);
			if (pages.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.setStorageSync("toHome", {
					footerBarListAc: 1
				});
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}
		}
	},
	created() {
		// #ifdef MP-WEIXIN
		let appid = uni.getStorageSync("wxAppid");
		if (appid == "wxbdd94a982a742f5b") {
			//言影
			this.miLinToken = "902d3d90022211efb767013692240353";
		} else if (appid == "wx20be0b577e748a8e") {
			//随拍
			this.miLinToken = "e21f995c321211efb72e013246675307";
		} else if (appid == "wxa71b495f0fa978da") {
			//默客
			this.miLinToken = "79d883cc3a8211efba04015338757072";
		}
		// #endif
	},
	onLoad(payload) {
		this.init(payload);
	},
	onShareAppMessage: function (res) {
		// 如果要自定义分享内容，可以设置shareTicket和query参数
		let pathInfo = `id=${this.item.id}`;
		let userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
		let inviteInfo = userInfo?.detailInfo?.inviteUrl;
		if (inviteInfo) {
			inviteInfo = userInfo?.detailInfo?.inviteUrl.slice(inviteInfo.indexOf("?") + 1);
		}
		let path = `/pages/browseVideo/browseVideo?${pathInfo}&${inviteInfo}`;
		console.log(path);
		return {
			title: tools.companyName + "数字人",
			path: path
			// imageUrl: "/static/share.jpg" // 分享卡片的图片
		};
	}
};
</script>

<style lang="scss">
.browse-video {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0vw;
	left: 0vw;
	display: flex;
	flex-direction: column;
	z-index: 11;
	background: #000;

	.videoEl {
		position: relative;
		width: 100%;
		flex: 1;
		z-index: 0;
	}

	.back {
		width: 100%;
		--btn-size: 10vw;
		display: block;
		padding-top: 10vw;
		padding-left: 2vw;
		.icon {
			width: var(--btn-size);
			height: var(--btn-size);
			display: block;
		}
	}

	.inCreateVideoBtn {
		background: #000;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 6.8vw;
		color: #fff;
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background: rgba(0, 153, 127, 0.86);
			height: auto;
			width: 23vw;
			border-radius: 2.5vw;
			border-style: none;
			padding-top: 0.75rem;
			padding-bottom: 0.75rem;
			padding-right: 0.75rem;
			padding-left: 0.75rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			font-weight: 700;
			transition: transform 0.2s;
			font-weight: 700;
		}
	}

	.right-btns {
		position: absolute;
		padding-right: 5vw;
		right: 0vw;
		bottom: 16vh;
		.btn {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 5vw;
			.icon {
				width: 6.8vw;
			}
			.text {
				color: #fff;
			}
		}
	}
}
</style>
